<template>
  <div class="consult-enter">
    <div class="title">谈话录入</div>
    <div class="step">
      <a-icon type="close" class="close" @click="onClose" />
      <a-steps :current="step" style="width: 400px;">
        <a-step title="基本资料" />
        <a-step title="谈话内容" />
      </a-steps>
    </div>

    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{span: 7}" :wrapper-col="{span: 17}">
      <a-row v-show="step == 0">
        <a-col :span="8">
          <a-form-model-item label="咨询人" prop="consultantName">
            <a-input v-model="form.consultantName" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="身份证号" prop="identification">
            <a-input v-model="form.identification" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="人员类型" prop="consultantType">
            <j-dict-select-tag v-model="form.consultantType" dictCode="personTypeConsult" placeholder="请选择" style="min-width: 100px" disabled/>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="联系电话" prop="phone">
            <a-input v-model="form.phone" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="咨询主题" prop="consultTopic">
            <a-input v-model="form.consultTopic" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="咨询次数" prop="consultNum">
            <a-input v-model="form.consultNum" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="谈话方式" prop="conversationStyle">
            <a-select v-model="form.conversationStyle">
              <a-select-option :value="1">线上咨询</a-select-option>
              <a-select-option :value="2">线下咨询</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="咨询开始时间" prop="consultStartTime">
            <a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="form.consultStartTime"
              style="width: 100%;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="咨询结束时间" prop="consultEndTime">
            <a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="form.consultEndTime"
              style="width: 100%;" />
          </a-form-model-item>
        </a-col>

      </a-row>
      <a-row style="width: 50%;margin: 0 auto;" v-show="step == 1">

        <a-col :span="24">
          <a-form-model-item label="咨询内容" prop="consultContent">
            <a-textarea v-model="form.consultContent" :auto-size="{ minRows: 14, maxRows: 14 }" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="下次咨询主题" prop="nextConsultTopic">
            <a-textarea v-model="form.nextConsultTopic" :auto-size="{ minRows: 6, maxRows: 6 }" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="上传附件" prop="fileId">
            <j-upload v-model="form.fileId" :isMultiple="true" />
          </a-form-model-item>
        </a-col>

      </a-row>
    </a-form-model>
    <div class="btn-wrap">
      <div style="margin: 0 15px;">
        <a-button v-if="step === 1" @click="prefStep">上一步</a-button>
        <a-button type="primary" v-else @click="nextStep">下一步</a-button>
      </div>
      <a-button v-if="step === 1" type="primary" @click="onSubmit">提交</a-button>
      <a-button style="margin-left: 15px;" type="primary" ghost @click="onSave">保存并退出</a-button>
      <a-button style="margin: 0 15px;" @click="onClose">取消</a-button>
    </div>
  </div>
</template>

<script>
  import {
    applyConsult,
    consultDetail
  } from '@/api/sjsk/psycholog/consult'
  export default {
    data() {
      return {
        step: 0,
        form: {
          "consultContent": "",
          "conversationStyle": null,
          "consultType": "",
          "consultEndTime": "",
          "consultTopic": "",
          "id": "",
          "consultStartTime": "",
          "psyTeacherId": "",
          "mechanismId": "",
          "consultStatus": "",
          "nextConsultTopic": "",
          fileId: ''
        },
        rules: {
          // consultantName: {
          //   required: true,
          //   message: '请选择',
          //   trigger: ['blur']
          // },
          // identification: {
          //   required: true,
          //   message: '请选择',
          //   trigger: ['blur']
          // },
          // consultantTypeName: {
          //   required: true,
          //   message: '请选择',
          //   trigger: ['blur']
          // },
          // phone: {
          //   required: true,
          //   message: '请选择',
          //   trigger: ['blur']
          // },
          // topical: {
          //   required: true,
          //   message: '请选择',
          //   trigger: ['blur']
          // },
          // num: {
          //   required: true,

          //   message: '请选择',
          //   trigger: ['blur']
          // },
          conversationStyle: {
            required: true,
            
            message: '请选择',
            trigger: ['input']
          },
          consultStartTime: {
            required: true,
            message: '请选择',
            trigger: ['input']
          },
          consultEndTime: {
            required: true,
            message: '请选择',
            trigger: ['input']
          },
          consultContent: {
            required: true,
            message: '请输入',
            trigger: ['input']
          }
        }
      }
    },
    async mounted() {
      const cache = sessionStorage.getItem('psychologConsultEnterCache') ? JSON.parse(sessionStorage.getItem('psychologConsultEnterCache')) : null
      if(cache && cache[this.$route.query.id]) {
        console.log('cache')
        console.log(cache)
        this.form = JSON.parse(cache[this.$route.query.id])
      } else {
        await this.getDetail()
      }
    },
    methods: {
      onSave() {
        const cache = sessionStorage.getItem('psychologConsultEnterCache') ? JSON.parse(sessionStorage.getItem('psychologConsultEnterCache')) : {}
        cache[this.form.id] = JSON.stringify(this.form)
        sessionStorage.setItem('psychologConsultEnterCache', JSON.stringify(cache))
        this.$router.replace('/psycholog/consult')
      },
      async getDetail() {
        const { id, type } = this.$route.query
        
        await consultDetail({id, type}).then(res => {
          this.form = {...this.form, ...res.result}
          console.log(this.form)
        })
      },
      onClose() {
        this.$router.replace('/psycholog/consult')
      },
      nextStep() {
        this.step += 1
      },
      prefStep() {
        this.step -= 1
      },
      onSubmit() {
        console.log(this.form)
        const form = JSON.parse(JSON.stringify(this.form))
        this.$refs.form.validate().then(() => {
          applyConsult(form).then(res => {
            const {
              success
            } = res
            if (success) {
              this.$message.success('谈话录入成功！')
              const cache = sessionStorage.getItem('psychologConsultEnterCache') ? JSON.parse(sessionStorage.getItem('psychologConsultEnterCache')) : null
              if(cache) {
                cache[this.form.id] = null
                sessionStorage.setItem('psychologConsultEnterCache', JSON.stringify(cache))
              }
              setTimeout(() => {
                this.$router.replace('/psycholog/consult')
              }, 1500)
            }
          })
        }).catch(err => {
          this.$message.warning('请完整填写表单后，再进行提交操作！')
        })
      }
    },
  }
</script>
<style lang="less" scoped>
  .consult-enter {
    background-color: #fff;
    padding: 0 20px;
    padding-bottom: 40px;

    .title {
      font-size: 20px;
      font-weight: bold;
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;
    }

    .step {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      position: relative;

      .close {
        position: absolute;
        left: 0;
        cursor: pointer;
      }
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
      margin-top: 60px;

    }
  }
</style>
